<template>
    <div class="all">
        <div class="fir">
            <img src="https://www.scvtc.edu.cn/images/mtcz.png" style="height: 30px;width:30px;margin-left:12px">
            <font size="6" style="margin: 20px;font-weight:bold">头条关注</font>
            <a href="https://www.scvtc.edu.cn/xwxw/ttgz.htm">
            <div class="more">MORE</div></a>
        </div>
        <ul>
            
            <li v-for="item,i2 in contentlist" :key="i2"><div class="r"></div>
                <span  class="j"><a :href="contentlistlist[i2]" :title="item">{{item.length>20?item.slice(0,19)+'...':item}}</a></span>
                <span class="time">{{time[i2]}}</span></li>
          
        </ul>


    </div>
</template>
<script setup lang="ts">
const contentlist = [
    "习近平复信比利时知名友好人士董博",
    "中国共产主义青年团第十九次全国代表大会在京开幕习近平等党和国家领导人到会祝贺",
    "习近平会见美国国务卿布林肯",
    "习近平致第十五届海峡论坛的贺信（全文）",
    "习近平向第十五届海峡论坛致贺信"]
 const contentlistlist = [
    "https://www.xuexi.cn/lgpage/detail/index.html?id=3561306500805805480&item_id=3561306500805805480",
    "https://www.xuexi.cn/lgpage/detail/index.html?id=14171826690553908220&item_id=14171826690553908220",
    "https://www.xuexi.cn/lgpage/detail/index.html?id=821355244778203447&item_id=821355244778203447",
    "https://www.xuexi.cn/lgpage/detail/index.html?id=175892646615988885&item_id=175892646615988885",
    "https://www.xuexi.cn/lgpage/detail/index.html?id=15274643494025884480&item_id=15274643494025884480"]
const time=[
'2023/06/20',
'2023/06/19',
'2023/06/19',
'2023/06/17',
'2023/06/17',

];
</script>

<style scoped lang="scss">
.all{
    margin: 20px;
    height: 200px;
    width: 420px;
    display: flex;
    flex-direction: column;

    .fir{
        height: 47px;
        display: flex;
        align-items: center;
        border-bottom:2px solid #eee;
        .more{
            margin-top: 15px;
            margin-left: 150px;
            margin-bottom: 15px;
            color: gray;
            font-weight: bolder;
            height: 40px;
            font-size: 18px;
            text-align: center;
         }
         .more:hover{
            color: orangered;
            border-bottom: 4px solid orangered;
            }
         }
}
ul{
    border-radius: 50%;
    font-size: 14px;
    font-family: 微软雅黑;
    li{
        height: 26px;
        display: flex;
        align-items: center;
        .time{
            width: 100px;
            text-align: right;
        
        }
        .time:hover{
            color: black;
        }
    }
    .j:hover{
        color: #921C1C;
    }
    .j{
       width: 310px;
    }
    .r{
        background-color: black;
        border-radius: 50% 50%;
        height: 5px;
        width: 6px;
        margin: 5px;
    }
}
</style>